import React, { Component } from 'react';
import {Table,Button,Input,Modal,Select  } from 'antd';
import request from '../../../utils/request';
import Axios from 'axios';

const { Option } = Select;


export default class Manager extends Component {
    state = {
        scoreList:[],   //成绩列表
        visible:false,  //控制弹窗显示隐藏
        notScore:[],     //未录入成绩的人员名单
        notUser:'',     //选中录入的人员
        num:'',           //学号
        skill:'',        //技能成绩
        theory:'',        //理论成绩
        searchKey:'',     //搜索关键词
        id:-1             //编辑的id
    }
    componentDidMount(){
        //获取数据
        this.getData();
    }

    getData = () => {
        //请求当天录入的成绩
        request.get('/api/score').then(res => {
            if(res.data.code === 1){
                this.setState({
                    scoreList:res.data.data
                })
            }
        })
    }

    //初始化数据
    initForm = () =>{
        this.setState({
            notUser:'',
            theory:'',
            skill:'',
            visible:false,
            id:-1
        })
    }

    //确定
    handleOk = async e => {
        //添加成绩的接口
        //编辑有id
        let {notUser,num,skill,theory,id} = this.state;

        let url = '',type='',errorMsg='';

        if(id != -1){
            //编辑
            url = `/api/score/${id}`;
            type = 'put';
            errorMsg = '编辑失败'
        }else{
            //添加
            url = '/api/score';
            type = 'post';
            errorMsg = '添加失败';
        }


        if(notUser && num && skill && theory){
            let res = await request[type](url,{username:notUser,num,skill,theory});
            if(res.data.code === 1){
                alert(res.data.msg);
            }
        }else{
            alert(errorMsg) 
        }
        this.getData();
        this.initForm();
    };

    //取消
    handleCancel = e => {
        this.initForm();
    };

    //打开弹窗
    showModal = () => {
        //获取今天未录入成绩的人员名单
        this.setState({
            visible: true,
        })
        if(this.state.id == -1){
            request.get('/api/notScore').then(res => {
                if(res.data.code === 1){
                    this.setState({
                        notScore:res.data.data
                    });
                }
            })
        }
    };

    //选择人员
    chooseUser = (value) => {
        console.log(value)
        let [notUser,num] = value.split('/'); //[马昱,12345678905]
        this.setState({
            notUser,
            num
        })
    }

    //受控表单
    change = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    //编辑函数
    edit = (recode) => {
        //打开弹窗  回显数据  id赋值
        this.setState({
            visible:true,
            notUser:recode.username,
            theory:recode.theory,
            skill:recode.skill,
            id:recode.id,
            num:recode.num
        })
    }

    //删除
    del = (id) => {
        request.delete(`/api/score/${id}`).then(res => {
            if(res.data.code === 1){
                alert('删除成功');
                this.getData();
            }
        })
    }

    //搜索
    search = () => {
        request.get('/api/search',{params:{searchKey:this.state.searchKey}}).then(res => {
            console.log(res);
            this.setState({
                scoreList:res.data.data
            })
        })
    }



    render() {
        let {scoreList,visible,notScore,skill,theory,searchKey,notUser,id} = this.state;
        const columns = [
            {
            title: '姓名',
            dataIndex: 'username',
            },
            {
            title: '理论成绩',
            dataIndex: 'theory',
            },
            {
            title: '技能成绩',
            dataIndex: 'skill',
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'x',
                render: (text,recode) => <div><Button type="primary" onClick={() => {
                    this.edit(recode)
                }}>编辑</Button><Button onClick={() =>{this.del(recode.id)}}>删除</Button></div>,
            }
        ];
        return (
            <div>
                <div>
        姓名：<Input placeholder="Basic usage" name="searchKey" value={searchKey} onChange={this.change}/> <Button onClick={this.search}> 搜索</Button>  <Button onClick={this.showModal}>添加</Button>
                </div>
                <Table columns={columns} dataSource={scoreList} size="middle" />
                <Modal
                    title="Basic Modal"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    >
                    姓名：{id != -1 ? notUser :<Select
                        style={{ width: 200 }}
                        placeholder="选择人员"
                        onChange={this.chooseUser}
                        value={notUser}
                    >
                        {notScore.map(item => <Option key={item.num} value={item.username+'/'+item.num}>{item.username}---{item.num}</Option>)}
                    </Select>}<br></br>
                    理论成绩：<Input placeholder="理论成绩" name="theory" value={theory} onChange={this.change}/><br></br>
                    技能成绩：<Input placeholder="技能成绩" name="skill" value={skill}  onChange={this.change}/>
                </Modal>
            </div>
        )
    }
}


//1.ppt  周五 明天交

//2.接着做成绩管理



module.exports = {
    devServer:{
        proxy:{
            '/aimads':{
                target:'http://10.200.226.70:8010'
            }
        }
    }
}

axios.get('/aimads/accessSystem/findAll',{params:{page:1,pageSize:2}}).then(res => {
    console.log(res)
})


axios.post('/aimads/accessSystem/save',{
    "createdBy": "刘凡",
    "createdDate": "2020-11-24 00:00:00",
    "remark": "test",
    "systemAuthPassword": "ccs123456",
    "systemAuthUsername": "ccs_dev",
    "systemCode": "meiyun",
    "systemHostname": "192.168.0.2",
    "systemName": "美云",
    "systemType": "Web",
}).then(res =>{
    console.log(res)
})